<template>
	<view class="writebox">
		<view class="flex middle between inner">
			<view class="input-w">
				<input :focus="focus" @input="handleInput" v-model="svalue" class="myinput" placeholder-style="color:#888" :placeholder="placeholder" />
				<view class="icon-write">
					<vs-img-icon :size="20" url="/static/img/common_review_left.png"></vs-img-icon>
				</view>
			</view>
			<view class="flex middle between w-right">
				<view v-if="loveShow" class="w-r">
					<vs-img-icon @click.stop.native="savecollectInfo" :url="isCollect>0?`/static/img/shoucang1.png`:`/static/img/shoucang.png`"></vs-img-icon>
				</view>
				<view class="w-r">
					<vs-img-icon @click.stop.native="saveComments" url="/static/img/common_review_send.png"></vs-img-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {collectInfo,collectCancal} from '@/api/homeapi'
	export default{
		props:{
			isCollect:{default:0},
			refId:{},
			type:{},
			value:{},
			placeholder:{},
			focus:{
				type:Boolean,
				default:false
			},
			loveShow:{default:false}
			
		},
		watch:{
			value(nval){
				this.svalue=nval
			}
		},
		data(){
			return{
				svalue:this.value
			}
		},
		methods:{
			handleInput(e){
				this.$emit('input',e.target.value)
			},
			saveComments(){
				if(this.svalue==='') return
				this.$emit('send',this.svalue)
			},
			savecollectInfo(){
				if(!this.refId) return;
				if(this.isCollect>0){
					collectCancal({id:this.refId}).then(res=>{
						console.log(res);
						if(res.code=='1'){
							this.$emit('update:isCollect',0)
						}else{
							this.$fn.toast(res.description)
						}
					})
				}else{
					collectInfo({refId:this.refId,type:this.type}).then(res=>{
						console.log(res);
						if(res.code=='1'){
							this.$emit('update:isCollect',1)
						}else{
							this.$fn.toast(res.description)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.writebox{
		width: 100%;
		padding: 10px 0;
		background: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.inner{
			width: 90%;
			.input-w{
				flex: 1;
				position: relative;
				.myinput{
					flex: 1;
					background: #eee;
					height: 40px;
					border-radius: 8px;
					padding-left: 40px;
					color: #363636;
				}
				.icon-write{
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
				}
				
			}
			.w-right{
				
				.w-r{
					margin-left: 40rpx;
				}
			}
			
		}
	}
</style>
